<template>
	<view class="custom-tabbar">
		<view class="tab" v-for="(item, index) in list" :key="index" @tap="switchTab(item.pagePath)">
			<image v-if="item.pagePath===activeTab" class="img" :src="item.selectedIconPath"></image>
			<image v-else :src="item.iconPath" class="img"></image>
			<view :class="item.pagePath==activeTab?'activetext':'text'">
				{{item.text}}
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import {
		ref, onMounted, toRefs
	} from "vue";
	import { onReachBottom, onPullDownRefresh, onUnload, onShow } from '@dcloudio/uni-app'

	const props = defineProps({
		//子组件接收父组件传递过来的值
		activeTab: {
			type: String,
			default: 'home'
		}
	})
	//使用父组件传递过来的值
	const {
		activeTab
	} = toRefs(props)
	let list = ref([
		{
			"pagePath": "home",
			"text": "首页",
			"iconPath": "/static/network/tab/home.svg",
			"selectedIconPath": "/static/network/tab/home-o.svg"
		},
		{
			"pagePath": "message",
			"text": "消息",
			"iconPath": "/static/network/tab/msg.svg",
			"selectedIconPath": "/static/network/tab/msg-o.svg"
		},
		{
			"pagePath": "order",
			"text": "工单",
			"iconPath": "/static/network/tab/order.svg",
			"selectedIconPath": "/static/network/tab/order-o.svg"
		},
		{
			"pagePath": "user",
			"text": "我的",
			"iconPath": "/static/network/tab/user.svg",
			"selectedIconPath": "/static/network/tab/user-o.svg"
		}
	])
	const switchTab = (e) => {
		uni.redirectTo({
			url: `/pages/pages_network/${e}/${e}`
		})
	}
</script>

<style scoped lang="scss">
	.custom-tabbar {
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		background-color: #fff;
		z-index: 99;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.tab {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.img {
				width: 50rpx;
				height: 50rpx;
			}

			.text {
				font-size: 22rpx;
				color: #808080;
			}

			.activetext {
				color: #007cff;
				font-size: 22rpx;
			}
		}
	}
</style>